<template>
    <div id="cityAreaDialog" >
        <el-dialog
            :title="title"
            :visible.sync="show"
            :width="width"
            :close-on-click-modal="closeOnClickModal"
            :close-on-press-escape="closeOnEsc"
            @closed.native="onClosed"
        >
            <el-row v-for="(region,area_index) in areaData">
                <el-col :span="4">
                    <el-button type="text" size="mini">
                        <el-checkbox v-model="region_chk_checks[region.regionid]" @change="(val) => { onRegionChange(val, region.regionid)}">{{region.regionname}}</el-checkbox>
                    </el-button>
                </el-col>
                <el-col :span="20">
                    <el-row>
                        <el-col :span="6" v-for="(province,province_index) in region.provinceVos" >
                             
                            <el-dropdown :hide-on-click="false" trigger="click" split-button type="text" size="mini">
                                <!-- <span class="el-dropdown-link"> -->
                                <el-checkbox v-model="province_chk_checks[province.areaid]" @change="(val) => { onProvinceChange(val, region.regionid, province.areaid)}">
                                    {{province.areaname}}({{province.children.length}})
                                </el-checkbox>
                                     <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
                                <!-- </span> -->
                                <el-dropdown-menu slot="dropdown" >
                                    <el-dropdown-item v-for="(city,city_index) in province.children">
                                        <el-checkbox v-model="city_chk_checks[city.areaid]" @change="(val) => { onCityChange(val, region.regionid, province.areaid, city.areaid)}">{{city.areaname}}</el-checkbox>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer dialog-footer-c">
                <el-button type="default" @click.native="cancel">取消</el-button>
                <el-button type="primary" @click.native="confirm">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default{
    data(){
        return {
            show: false,
            region_chk_checks: [],
            province_chk_checks: [],
            city_chk_checks: [],
        };
    },
    model: {
        prop: 'defaultCityIdList'
    },
    props:{
        areaData:{
            type: Array,
            default: [],
        },
        defaultCityIdList:{
            type: Array,
            default: [],
        },
        title: {
            type: String,
            default: "选择区域",
        },
        width:{
            type: String,
            default: "800px",
        },
        closeOnClickModal:{
            type: Boolean,
            default: false,
        },
        closeOnEsc:{
            type: Boolean,
            default: false,
        },
    },
    methods: {
        // 当区的复选框变更
        onRegionChange(val, regionid){
            this.areaData.forEach( ( area, index) => {
                if( area.regionid == regionid){
                    area.provinceVos.forEach( ( province, pindex) => {
                        this.$set( this.province_chk_checks, province.areaid * 1, val);
                        province.children.forEach( ( city, cindex) =>{
                            this.$set( this.city_chk_checks, city.areaid * 1, val);
                        } );
                    } );
                }
            });
        },
        // 检查区，看区下面的是不是全选了，是的话就勾引，不是就不勾选
        changeRegionChk( regionid){
            this.areaData.forEach( ( area, index) => {
                var choose = true;
                if( area.regionid == regionid){
                    area.provinceVos.forEach( ( province, pindex) => {
                        choose = choose && this.province_chk_checks[ province.areaid];
                    } );
                    this.$set( this.region_chk_checks, area.regionid, choose);
                }
            });
        },
        // 当省选择的变更
        onProvinceChange(val, regionid, provinceid){
            this.areaData.forEach( ( area, index) => {
                if( area.regionid == regionid){
                    area.provinceVos.forEach( ( province, pindex) => {
                        if( province.areaid == provinceid){
                            province.children.forEach( ( city, cindex) =>{
                                this.$set( this.city_chk_checks, city.areaid * 1, val);
                            } );
                        }
                    });
                    this.changeRegionChk( regionid);
                }
            });
        },
        // 当市选择的变更
        onCityChange( val, regionid, provinceid, cityid){
            this.areaData.forEach( ( area, index) => {
                if( area.regionid == regionid){
                    area.provinceVos.forEach( ( province, pindex) => {
                        if( province.areaid == provinceid){
                            var choose = true;
                            province.children.forEach( ( city, cindex) =>{
                                choose = choose && this.city_chk_checks[ city.areaid] && val;
                            });

                            this.$set( this.province_chk_checks, province.areaid, choose);
                        }
                    } );
                    this.changeRegionChk( regionid);
                }
            });
        },
        showDialog(){
            this.show = true;
        },
        hideDialog(){
            this.show = false;
        },
        cancel(){
            this.hideDialog();
        },
        confirm(){
            var citylist = [];
            this.city_chk_checks.forEach( (val, index) => {
                if( !!val){
                    citylist.push( index);
                }
            });
            this.hideDialog();
            this.$emit( "input", citylist);
            this.$emit( "onConfirm", citylist);
        },
    },
    created(){
        // 可以改，但改多了没意义
        this.city_chk_checks.length = this.province_chk_checks.length = this.region_chk_checks.length = 5000;
        this.city_chk_checks.fill( false);
        this.province_chk_checks.fill( false);
        this.region_chk_checks.fill( false);

        this.defaultCityIdList.forEach( ( val, index) => {
            this.city_chk_checks[ val] = true;
        });
    },
    mounted(){
    }
};
</script>

<style>
.el-dialog__footer{
    text-align: right !important;
}
</style>

<style type="text/scss" lang="scss">
.text-center{
    text-align: center;
}
.el-dropdown-link{
    cursor: pointer;
    color123: #409eff;
}
</style>